<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>


  <!--bootstrap3-->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <!--    <link rel="stylesheet" href="/css/message.css">-->


</head>
<body>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">学生信息</h3>
  </div>
  <div class="panel-body">
    <div style="display:inline-block;">

      <!--        <div style="float:left;padding:6px;">-->
      <!--          <span>姓名：</span>-->
      <!--        </div>-->

      <!--        <div style="float:left;padding:6px;">-->
      <!--          <span>性别：</span>-->
      <!--        </div>-->
      <div style="float:left;">
        <select id="chooseQuery" class="form-control" style="width:87px;">
          <option value="0">请选择</option>
          <option value="1">学号</option>
          <option value="2">姓名</option>
          <option value="3">性别</option>
          <option value="4">年龄</option>
          <option value="5">班级号</option>
          <option value="6">年级号</option>
          <option value="7">专业编号</option>
        </select>
      </div>
      <div style="float:left;">
        <input id="searchPassage" class="form-control" style="width:200px;" placeholder="请输入查询内容" />
      </div>

      <div style="float:left;margin-left:20px;">
        <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
        </button>
        <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
        </button>
        <!-- Button trigger modal -->
        <!--          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">-->
        <!--                        <span class="glyphicon glyphicon-plus">-->
        <!--                        </span>新增-->
        <!--          </button>-->
        <!--          <button type="button" class="btn btn-danger"   onclick="batchDelete();">-->
        <!--                        <span class="glyphicon glyphicon-trash">-->
        <!--                        </span>批量删除-->
        <!--          </button>-->
        <!--          <button type="button" id="upload" class="btn btn-primary">-->
        <!--                        <span class="glyphicon glyphicon-plus">-->
        <!--                        </span>批量导入-->
        <!--          </button>-->

      </div>
    </div>
  </div>
</div>

<div class="box1">
  <table class="table table-bordered table-striped" id="stuTable"></table>
</div>


<!--批量导入模态框-->
<!--批量导入操作-->
<!-- 模态框（Modal） -->

<!--<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">-->
<!--  <div class="modal-dialog">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
<!--        <h4 class="modal-title" id="ModalLabel">文件上传</h4>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        <input id="f_upload" type="file"  name="file"/>-->
<!--      </div>-->

<!--    </div>-->
<!--  </div>-->
<!--</div>-->

<!--学生详情-->
<div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">学生详情</h4>
      </div>
      <div class="modal-body">

        <table class="table11_6">
          <tr>
            <td> <span>学号：</span> </td>
            <td>
              <input type="text" class="form-control form1" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno" readonly="readonly">
            </td>
          </tr>
          <tr>
            <td> <span>姓名：</span></td>
            <td>
              <input type="text" class="form-control form1" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname"  readonly="readonly">
            </td>

          </tr>
          <tr>
            <td> <span>性别：</span></td>
            <td>
              <input type="text" class="form-control form1" id="sex" aria-describedby="emailHelp" placeholder="Enter sex" name="sex"  readonly="readonly">
            </td>
          </tr>
          <tr>
            <td> <span>年龄：</span></td>
            <td> <input type="text" class="form-control form1" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage"  readonly="readonly"></td>
          </tr>

          <tr>
            <td><span>密码：</span></td>
            <td> <input type="text" class="form-control form1 formpassword" id="password" aria-describedby="emailHelp" placeholder="password" name="password"  readonly="readonly"></td>
          </tr>
          <tr>
            <td> <span>班级号：</span></td>
            <td> <input type="text" class="form-control form1" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid"  readonly="readonly"></td>
          </tr>
          <tr>
            <td> <span>年级号：</span></td>
            <td> <input type="text" class="form-control form1" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid"  readonly="readonly"></td>
          </tr>
          <tr>
            <td><span>专业编号：</span></td>
            <td> <input type="text" class="form-control form1" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid"  readonly="readonly"></td>
          </tr>

        </table>


<!--        <form id="formStudent">-->
<!--          <input hidden="hidden" id="id" name="id">-->
<!--          <div class="form-group">-->
<!--            <span>学号：</span>-->
<!--            <input type="text" class="form-control" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno" readonly="readonly">-->
<!--          </div>-->
<!--          <div class="form-group">-->
<!--            <span>姓名：</span>-->
<!--            <input type="text" class="form-control" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname"  readonly="readonly">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <span>性别：</span>-->
<!--            <input type="text" class="form-control" id="sex" aria-describedby="emailHelp" placeholder="Enter sex" name="sex"  readonly="readonly">-->
<!--&lt;!&ndash;            <select class="form-control" id="sex" name="sex">&ndash;&gt;-->
<!--&lt;!&ndash;              <option value="男">男</option>&ndash;&gt;-->
<!--&lt;!&ndash;              <option value="女">女</option>&ndash;&gt;-->
<!--&lt;!&ndash;            </select>&ndash;&gt;-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <span>年龄：</span>-->
<!--            <input type="text" class="form-control" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage"  readonly="readonly">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <span>密码：</span>-->
<!--            <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password"  readonly="readonly">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <span>班级号：</span>-->
<!--            <input type="text" class="form-control" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid"  readonly="readonly">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <span>年级号：</span>-->
<!--            <input type="text" class="form-control" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid"  readonly="readonly">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <span>专业编号：</span>-->
<!--            <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid"  readonly="readonly">-->
<!--          </div>-->

<!--        </form>-->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--        <button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 学生Modal -->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--  <div class="modal-dialog" role="document">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--        <h4 class="modal-title" id="myModalLabel">学生信息</h4>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        <form id="formStudent">-->
<!--          <input hidden="hidden" id="id" name="id">-->
<!--          <div class="form-group">-->
<!--            <label for="sno">学号</label>-->
<!--            <input type="text" class="form-control" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno">-->
<!--          </div>-->
<!--          <div class="form-group">-->
<!--            <label for="sname">姓名</label>-->
<!--            <input type="text" class="form-control" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="sex">性别</label>-->
<!--            <select class="form-control" id="sex" name="sex">-->
<!--              <option value="男">男</option>-->
<!--              <option value="女">女</option>-->
<!--            </select>-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="sage">年龄</label>-->
<!--            <input type="text" class="form-control" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="password">密码</label>-->
<!--            <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="classid">班级号</label>-->
<!--            <input type="text" class="form-control" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="gradeid">年级号</label>-->
<!--            <input type="text" class="form-control" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="mid">专业编号</label>-->
<!--            <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">-->
<!--          </div>-->

<!--        </form>-->
<!--      </div>-->
<!--      <div class="modal-footer">-->
<!--        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<!--        <button type="button" class="btn btn-primary" onclick="saveStudent();">-->
<!--          <span class="glyphicon glyphicon-floppy-save"></span>-->
<!--          保存-->
<!--        </button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->




<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/upload.js"></script>
<script src="/js/fileinput.min.js"></script>
<!--  <script src="/js/message.js"></script>-->
<script src="/js/msg.js"></script>
<script>

  /**
   * 显示学生列表
   */
  function loadTable(){
    $("#stuTable").bootstrapTable({
      url: '/webapi/student/getbypage',
      striped:true, //设置为ture有隔行变色效果
      pagination:true,//设置为true会在底部显示分页条
      singleSelect: false,//设置为true将禁止多选
      pageSize:8,   //设置分页的每页条数
      pageList:[8],
      pageNumber:1, //设置了分页，首页页码
      uniqueId : "id", //每一行的唯一标识，一般为主键列
      paginationPreText: "上一页",
      paginationNextText: "下一页",
      sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
      queryParams:function (params){
        let paraObj = {
          size: params.limit,
          page: params.offset/params.limit,
          sort: params.sort,
          direct: params.order,
          passage:$("#searchPassage").val(),
          chooseValue: $("#chooseQuery").val()
        };
        return paraObj;
      },

      sortName: "id",
      sortOrder: "asc",
      onSort:function (name,order){
        // params.sortName = name;
        // params.sortOrder = order;
        console.log(name);
        console.log(order);
      },

      onLoadError:function (rs){
        console.log(rs)
        if (rs.code === 403){
          window.location.href = "../../templates/login/user.html"
        }
      },
      responseHandler:function (res){
        console.log(res.data)
        return {
          "total": res.data.total, // 总页数
          "rows": res.data.rows    // 数据

        }
        // return res.data
      },
      columns:[{
        field: "id",
        title: "序号",
        sortable: true,
        align: "center"
      },{
        field: "sno",
        title: "学号",
        sortable: true,
        align: "center"
      },{
        field: "sname",
        title: "姓名",
        sortable: true,
        align: "center"
      },{
        field: "sex",
        title: "性别",
        sortable: true,
        align: "center"
      },{
        field: "sage",
        title: "年龄",
        sortable: true,
        align: "center"
      },{
        field: "classid",
        title: "班级号",
        sortable: true,
        align: "center"
      },{
        field: "gradeid",
        title: "年级号",
        sortable: true,
        align: "center"
      },{
        field: "mid",
        title: "专业编号",
        sortable: true,
        align: "center"
      },{
        field: "id",
        title: '操作',
        align: 'center',
        formatter: function(value,row,index){
          // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
          // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
          let e = "<button id='look' class='btn btn-info btn-xs' style='width: 60px;height: 30px' onclick='queryStudent("+row.id+");'>" +
                  "详情</button> "
          // let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
          //         "<span class='glyphicon glyphicon-trash'></span>删除</button>"
          return e;
        },width:250 //自定义修改，增加修改、删除标志
      }],
      formatNoMatches: function (){
        return "没有相关的匹配结果";
      },
      formatLoadingMessage:function (){
        return "请稍等，正在加载中...";
      }
    })
  }

  function queryStudent(id){
      //查看按钮 显示模态框
      $("#detailModal").modal("show");
    $.ajax({
      url:'/webapi/student/get/'+id
    }).done(function (rs){
      console.log(rs)
      if (rs.code === 200){
        let data = rs.data
        $("#id").val(data.id);
        $("#sno").val(data.sno);
        $("#sname").val(data.sname);
        $("#sex").val(data.sex);
        $("#sage").val(data.sage);
        $("#password").val("");
        $("#classid").val(data.classid);
        $("#gradeid").val(data.gradeid);
        $("#mid").val(data.mid);
      }
    })
  }
  /**
   * 批量删除
   */
  // function batchDelete(){
  //   let rows = $("#stuTable").bootstrapTable("getSelections");
  //   let len = rows.length;
  //   if(len == 0){
  //     message.showText("error","请选择要删除的行")
  //   }else{
  //     if(confirm("你确定删除"+len+"条内容吗？")){
  //       let arr = [];
  //       for (let i = 0;i < len;i++){
  //         arr.push(rows[i].id);
  //       }
  //       $.ajax({
  //         url: '/webapi/student/batchdelete/'+arr,
  //         method: 'delete'
  //       }).done(function (rs){
  //         if (rs.code == 200){
  //           $("#stuTable").bootstrapTable("destroy");
  //           loadTable();
  //           message.showText("success","删除成功")
  //         }
  //
  //       })
  //     };
  //
  //
  //   }
  //
  // }

  /**
   * 删除学生
   */
  // function deleteStudent(id){
  //   if(confirm("您是否真的要删除该记录?")){
  //     $.ajax({
  //       url: '/webapi/student/delete/'+id,
  //       method: 'delete'
  //     }).done(function (rs){
  //       if (rs.code == 200){
  //         $("#stuTable").bootstrapTable("destroy");
  //         loadTable();
  //         message.showText("success","删除成功")
  //       }
  //
  //     })
  //   }
  //
  // }

  /**
   * 点击新增时给id赋值，以便判断做新增操作
   */
  // function preAdd(){
  //   $("#id").val(0);
  //   $("#sno").val("");
  //   $("#sname").val("");
  //   $("#sex").val("");
  //   $("#sage").val("");
  //   $("#password").val("");
  //   $("#classid").val("");
  //   $("#gradeid").val("");
  //   $("#mid").val("");
  // }

  // 修改之前获取学生信息
  // function editStudent(id){
  //   $('#myModal').modal('show')
  //   $.ajax({
  //     url:'/webapi/student/get/'+id
  //   }).done(function (rs){
  //     console.log(rs)
  //     if (rs.code == 200){
  //       let data = rs.data
  //       $("#id").val(data.id);
  //       $("#sno").val(data.sno);
  //       $("#sname").val(data.sname);
  //       $("#sex").val(data.sex);
  //       $("#sage").val(data.sage);
  //       $("#password").val("");
  //       $("#classid").val(data.classid);
  //       $("#gradeid").val(data.gradeid);
  //       $("#mid").val(data.mid);
  //     }
  //   })
  // }

  /**
   * 根据id判断是新增还是更新，判断之后做新增和更新操作
   */
  // function saveStudent(){
  //   let data = $("#formStudent").serialize();
  //   let id = $("#id").val();
  //   if (id < 1){
  //     //是新增
  //     $.ajax ({
  //       url:"/webapi/student/insert",
  //       method:"post",
  //       data:data
  //     }).done(function (rs) {
  //       console.log(rs)
  //       if (rs.code == 200){
  //         $('#stuTable').bootstrapTable('destroy');
  //         loadTable();
  //         $('#myModal').modal('hide');
  //         message.showText("success","添加成功")
  //       }
  //
  //     });
  //   } else {
  //
  //     //是更新
  //     $.ajax ({
  //
  //       url:"/webapi/student/update",
  //       method:"put",
  //       data:data
  //
  //     }).done(function (rs) {
  //       if (rs.code == 200){
  //         $('#stuTable').bootstrapTable('destroy');
  //         loadTable();
  //         $('#myModal').modal('hide');
  //         message.showText("success","更新成功")
  //       }
  //     });
  //   }
  // }
  //
  /**
   * 刷新数据
   */
  function resetList(){
    $("#searchPassage").val("");
    $("#chooseQuery").val(0);
    $('#stuTable').bootstrapTable("destroy");
    loadTable();
    message.showText("success","刷新成功");
  }
  function search(){
    $("#stuTable").bootstrapTable("destroy");
    loadTable();
  }

  $(function (){
    loadTable()
  })

  // 引用后需要初始化，解决IE8以上浏览器不支持JS的h5新属性classList
  // $(function(){
  //     message.classList()
  // })

</script>

</body>
</html>